<template>
    <div id="components-layout-demo-basic">
      <a-layout>
        <a-layout-sider v-model="collapsed">
          <div class="logo" />
        <u-nav></u-nav>
        </a-layout-sider>
        <a-layout>
          <a-layout-header>
            <div>
                <a-icon class="trigger" :type="collapsed ? 'menu-unfold' : 'menu-fold'" @click="()=> collapsed = !collapsed" />
            </div>
          </a-layout-header>
          <a-layout-content>
            <u-tabs></u-tabs>
          </a-layout-content>
          <a-layout-footer v-if="false">Footer</a-layout-footer>
        </a-layout>
      </a-layout>
    </div>
</template>

<script>
import UNav from './UNav.vue'
import UTabs from './UTabs.vue'

export default {
    name: 'Index',
    props: {
        msg: String
    },
    data() {
        return {
            collapsed: false
        };
    },
    components: {
        UNav, UTabs
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  #components-layout-demo-basic {
    text-align: left;
    height: 100%;
  }
  #components-layout-demo-basic .ant-layout-header {
    padding-left:20px;
  }
  #components-layout-demo-basic .ant-layout-header,
  #components-layout-demo-basic .ant-layout-footer {
    background: #fff;
    color: #000;
  }
  #components-layout-demo-basic .ant-layout-footer {
    line-height: 1.5;
  }
  #components-layout-demo-basic .ant-layout-sider {
    text-align: left;
    background: rgba(0, 21, 41, 1);
    color: #fff;
    line-height: 120px;
    height: 100%;
    overflow:auto;
  }
  #components-layout-demo-basic .ant-layout-content {
    background: #fff;
    color: #000;
    min-height: 420px;
    line-height: 120px;
  }
  #components-layout-demo-basic > .ant-layout {
    margin-bottom: 48px;
    height: 100%;
  }
  #components-layout-demo-basic > .ant-layout:last-child {
    margin: 0;
  }
  #components-layout-demo-basic .logo {
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    margin: 16px;
  }
</style>
